<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 单根节点 -->
		<div id="app">
			{{message}}
			<div>
				子元素div中{{message}}
			</div>
			<span v-text="spanText">

			</span>
			<span v-html="htmlText"></span>
			<input type="checkbox" value="2" v-bind:value="checkValue" />
			<input type="checkbox" value="2" :value="checkValue" />简写方式
			<input type="checkbox" value="2" :value="true" />直接写值

			<!-- <h1 v-else>Oh no 😢</h1> -->

			<!-- 与for in和for-of循坏类似 -->
			<ul>
				<li v-for="todo in todos">
					{{todo.text}}
				</li>
			</ul>
			<ul>
				<li v-for="(value, name) of book">{{name+ "," + value}}</li>
			</ul>
		</div>
		<!-- <div>
			vue没有接管该dom元素{{message}}
		</div> -->

		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/* 
				创建Vue对象
					1、指令该对象挂载的Dom元素，一般通过id
					2、Vue对象一创建，就会接管该Dom元素及其以下所有的Dom
					3、通过Vue的特有指令，将data变量中的值显示在Dom元素上
					4、指令只能写在dom的开始标签的<>内，类似于元素的属性写法
			 */

			let app = new Vue({
				el: '#app', //el:全称为element，将Vue对象挂载到哪个标签元素上。建议使用id
				data: { //定义Vue变量区域
					message: 'Hello Vue!',
					spanText: '这是span的内容',
					htmlText: '<a href="http://www.baidu.com">百度</a>',
					checkValue: 1,
					seen: false,
					todos: [{
							text: '学习 JavaScript'
						},
						{
							text: '学习 Vue'
						},
						{
							text: '整个牛项目'
						}
					],
					book: {
						id: 1,
						name: 'Java从入门到放弃',
						price: 80,
						tdate: '2020-07-01',
						count: 1,
						account: "hehe"
					}
				},
			})
		</script>
	</body>
</html>
